$('#head').load('./tou.html');
$('#footer').load('./jiao.html');

var id = getCookie('login_user');
xunrang();
//渲染页面函数
function xunrang() {
    APIcar({ id }).then(({ data }) => {
        var html = '';
        $.each(data, function (index, { xuhao,price, img, gname, shumu }) {
            html += `
            <div class="wupin" index="${xuhao}">
                    <span>￥<i class="jiaqian">${price}</i></span>
                    <input type="checkbox" name="" class="check-one">
                    <img src=${img} alt="">
                    <p class="p1">Nike Dri-FIT Swoosh</p>
                    <p>${gname}</p>
                    <p>黑</p>
                    <p>尺码<select name="" id="">
                            <option value="">S</option>
                            <option value="">M</option>
                            <option value="">L</option>
                            <option value="">XL</option>
                        </select>
                        数量<select name="" class="shuliang">
                            <option value="${shumu}">${shumu}</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </p>
                    <div class="shiyan"><span>移至收藏</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="delete">删除</span></div>
                </div>
            `
        })
        $('#xuan').html(html);
    })
}
zongjie()
//全选
$('.check-all').click(function () {
    // console.log($('.check-all').prop('checked'));
    $('.check-one').prop('checked', $('.check-all').prop('checked'));
    zongjie()
})

//单选
$('.left').on('click', '.check-one', function () {
    if ($('.check-one').length == $('.check-one:checked').length) {
        $('.check-all').prop('checked', true);
    } else {
        $('.check-all').prop('checked', false);
    }
    zongjie()
})//后生成需要用事件委托

//$('.check-one').click(function(){
// var flag = true ;//插旗
// $('.check-one').each((index,value) => {//遍历所有单选，获取选择状态，改变旗子
//     if(!value.checked){
//         flag = false ;
//         return flag;
//     }
// })
// $('.check-all').prop('checked',flag);

//判断单选长度和选中单选长度是否相等
// if($('.check-one').length == $('.check-one:checked').length){
//     $('.check-all').prop('checked',true);
// }else{
//     $('.check-all').prop('checked',false);
// }
// })


//删除
layui.use('layer', function () {
    var layer = layui.layer;
    $(document).on('click', '.delete', function () {
        _this = $(this);

        // layer.confirm('确认删除吗？', function () {
        //     $(this).parent().parent().remove();
        //     zongjie()
        // });

        layer.confirm('确认删除吗？', {
            btn: ['确认', '取消'] //可以无限个按钮
            ,
        }, function (index, layero) {
            var xuhao = _this.parent().parent().attr('index');
            APIshanchu({xuhao}).then(({msg}) => {
                layer.msg(msg);
            })
            _this.parent().parent().remove();
            zongjie();
        }, function (index) {
            //按钮【按钮二】的回调
        });
        $(this).parent().parent().remove();
        zongjie()
    })
});

//批量删除
$('.quanshan').click(function(){
    // console.log(666);
    console.log($('.check-one:checked').parent().attr('index'));
    var arr =[];
    $('.check-one:checked').each((index,value)=>{
        arr.push($(value).parent().attr('index'));
    })
    APIquanshan({arr:JSON.stringify(arr)}).then(({msg}) =>{
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg(msg);
            location.reload();
        })
    });
})


//数量更改
$(document).on('change', '.shuliang', function () {
    // console.log($(this).val());
    var xuhao = $(this).parent().parent().attr('index');
    var shumu = $(this).val();
    APIzaici({xuhao, shumu})
    zongjie();
})

//总结函数
function zongjie() {
    var zongjia = 0;
    $('.check-one').each((index, value) => {
        if (value.checked) {
            zongjia += $(value).parent().find('.jiaqian').html() * $(value).parent().find('.shuliang').val();
        }
        $('.zongjia').html('￥' + zongjia);
    })
}

//结算跳转
$('.jiesuan').click(function(){
    var str = '';
    // console.log($('.check-one:checked').parent().attr('index'));
    // console.log($('.check-one:checked').parent().find('.shuliang').val());
    $('.check-one:checked').each((index,value) =>{
        // console.log($(value));
        var xuhao = $(value).parent().attr('index');
        var shumu = $(value).parent().find('.shuliang').val();
        str += `xuhao${index}=${xuhao}&`
        APIzaici({xuhao, shumu})
    })
    str= str.substring(0,str.length-1)
    location.href = `./7jiesuan.html?${str}`;
})